<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="代理商名称:">
        <el-input v-model="searchKey.schoolname" clearable placeholder="请输入代理商名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="年级名称:">
        <el-input v-model="searchKey.gradename" clearable placeholder="请输入年级名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="班级名称:">
        <el-input v-model="searchKey.classname" clearable placeholder="请输入班级名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="学生姓名:">
        <el-input v-model="searchKey.studentname" clearable placeholder="请输入学生姓名" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="设备编码:">
        <el-input v-model="searchKey.deviceid" clearable placeholder="请输入设备编码" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="设备手机号:">
        <el-input v-model="searchKey.phone" clearable placeholder="请输入设备手机号" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item label="学生类型:">
        <el-select v-model="searchKey.studenttype" placeholder="请输入学生类型">
          <el-option label="全部" :value="0" />
          <el-option label="走读" :value="1" />
          <el-option label="寄宿" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table ref="table" :data="searchData" v-loading="page.tableLoading" center stripe border>
        <el-table-column prop="schoolname" label="学校名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="gradename" label="年级名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="classname" label="班级名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="studentname" label="学生姓名" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="deviceid" label="设备编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="phone" label="设备手机号" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="studenttype" label="状态" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.studenttype==1?'走读':'寄宿'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button type="success" size="small" round  @click="editInfo(props.row)">修 改</el-button>
            <el-button type="danger" size="small" round  @click="delInfo(props.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog :title="!addModel.item.studentid ? '新增' : '修改'" :visible.sync="addModel.flag" width="750px" :close-on-click-modal="false">
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display:flex;">
          <el-form-item label="学校名称:" required>
            <el-select v-model="addModel.item.schoolname" filterable  placeholder="请选择学校名称" @change="schoolChange(addModel.item.schoolname)" :disabled="addModel.item.studentid?true:false">
              <el-option
                v-for="item in schoolList"
                :key="item.schoolid"
                :label="item.schoolname"
                :value="item.schoolname">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级名称:" required>
            <el-select v-model="addModel.item.gradename" filterable   placeholder="请选择年级名称" @change="gradeChange(addModel.item.gradename)" :disabled="addModel.item.studentid?true:false">
              <el-option
                v-for="item in gradeList"
                :key="item.gradeid"
                :label="item.gradename"
                :value="item.gradename">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="班级名称:" required>
            <el-select v-model="addModel.item.classname" filterable   placeholder="请选择班级名称" @change="classChange(addModel.item.classname)" :disabled="addModel.item.studentid?true:false">
              <el-option
                v-for="item in classList"
                :key="item.classid"
                :label="item.classname"
                :value="item.classname">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名:" required>
            <el-input v-model="addModel.item.studentname" placeholder="请输入学生姓名" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="学生类型:" required>
            <el-select v-model="addModel.item.studenttype" placeholder="请选择学生类型">
              <el-option label="走读" :value="1" />
              <el-option label="寄宿" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" required>
            <el-select v-model="addModel.item.status" placeholder="请选择代理商类型">
              <el-option label="删除" :value="0" />
              <el-option label="正常" :value="1" />
              <el-option label="转学" :value="2" />
              <el-option label="毕业" :value="3" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="设备编码:" required>
            <el-input v-model="addModel.item.deviceid" type="input" placeholder="请输入设备编码" />
          </el-form-item>
          <el-form-item label="学生手机号:" required>
            <el-input v-model="addModel.item.phone" type="input" placeholder="请输入学生手机号" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="性别:" required>
            <el-select v-model="addModel.item.sex" placeholder="请选择学生类型">
              <el-option label="男" :value="'男'" />
              <el-option label="女" :value="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学号:" required>
            <el-input v-model="addModel.item.studentno" type="input" placeholder="请输入学号" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="入学年份:" required>
            <el-date-picker v-model="addModel.item.entranceyear" value-format="yyyy" format="yyyy" type="year" placeholder="请输入入学年份" :picker-options="startDatePicker" />
          </el-form-item>
          <div></div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

//
import {
  getschoollist,
  getgradelist,
  getclasslist,
  getstudentlist,
  addstudent,
  editstudent,
  delstudent
} from '@/api/educationalManagement/index'
import Pagination from '@/components/Pagination' // 分页
const defaultAddItem = {
  studentname:'',
  schoolname: '',
  gradename: '',
  classname: '',
  status: 1,
  studenttype: 1,
  deviceid: '',
  phone: '',
  sex: '男' ,
  studentno: '' ,
  entranceyear: ''
}
export default {
  name: 'AgentManagement',
  components: { Pagination },
  data() {
    return {
      searchKey: {
        schoolname: '',
        gradename: '',
        classname: '',
        studentname: '',
        deviceid: '',
        phone: '',
        studenttype: ''
      },
      startDatePicker:{
        disabledDate(time) {
           return time.getTime() > Date.now()
        }
      },
      schoolList: [],
      gradeList: [],
      classList: [],
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0 // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem
      }
    }
  },
  mounted() {
    this.onsearch()
    this.getSchoolList()
  },
  methods: {
    schoolChange(val){
      // this.schoolList.forEach(element => {
      //   if (element.schoolid==val) {
      //     this.addModel.item.schoolname = element.schoolname
      //   }
      // });
      console.log(val);
      this.addModel.item.gradename = ''
      this.gradeList= []
      this.addModel.item.classname = ''
      this.classList= []
      this.getGradeList(val)
    },
    gradeChange(val){
      // this.schoolList.forEach(element => {
      //   if (element.gradeid==val) {
      //     this.addModel.item.gradename = element.gradename
      //   }
      // });
      this.addModel.item.classname = ''
      this.classList= []
      this.getClasslList(val)
    },
    classChange(val){
      // this.getGradeList(this.addModel.item.schoolname)
      // this.classList.forEach(element => {
      //   if (element.classid==val) {
      //     this.addModel.item.gradename = element.gradename
      //   }
      // });
    },
    getSchoolList(){
      var params = {}
      var that = this
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      getschoollist(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.schoolList = res.data.data.datalist
            }else{
              that.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          })
    },
    getGradeList(schoolname){
      var params = {}
      var that = this
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      params.schoolname = schoolname 
       getgradelist(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.gradeList = res.data.data.datalist
            }else{
              that.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          })
    },
    getClasslList(gradename){
      var params = {}
      var that = this
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      params.gradename = gradename 
      getclasslist(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.classList = res.data.data.datalist
            }else{
              that.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          })
    },
    addChange() {
      this.addModel.item = Object.assign({}, defaultAddItem)
      this.addModel.flag = true
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row)
      this.addModel.flag = true
    },
    submitArea() {
      var that = this
      var params = {}
      if (that.addModel.item.studentid) {
        params.studentid = that.addModel.item.studentid
      }
      params.studentname = that.addModel.item.studentname
      params.schoolname = that.addModel.item.schoolname
      params.gradename = that.addModel.item.gradename
      params.classname = that.addModel.item.classname
      params.status = that.addModel.item.status
      params.studenttype = that.addModel.item.studenttype
      params.deviceid = that.addModel.item.deviceid
      params.phone = that.addModel.item.phone
      params.sex	 = that.addModel.item.sex	
      params.studentno = that.addModel.item.studentno
      params.entranceyear = Number(that.addModel.item.entranceyear)
      if(!params.schoolname){
        this.$message({
          type: 'warning',
          message: '学校名称不能为空！'
        })
        return false
      }
      if(!params.gradename){
        this.$message({
          type: 'warning',
          message: '年级名称不能为空！'
        })
        return false
      }
      if(!params.classname){
        this.$message({
          type: 'warning',
          message: '班级名称不能为空！'
        })
        return false
      }
      if(!params.studentname){
        this.$message({
          type: 'warning',
          message: '学生姓名不能为空！'
        })
        return false
      }
      if(!params.status && params.status!=0){
        this.$message({
          type: 'warning',
          message: '状态不能为空！'
        })
        return false
      }
      if(!params.studenttype){
        this.$message({
          type: 'warning',
          message: '学生类型不能为空！'
        })
        return false
      }
      if(!params.deviceid){
        this.$message({
          type: 'warning',
          message: '设备编码不能为空！'
        })
        return false
      }
      if(!params.phone){
        this.$message({
          type: 'warning',
          message: '学生手机号不能为空！'
        })
        return false
      }
      if(!params.sex){
        this.$message({
          type: 'warning',
          message: '性别不能为空！'
        })
        return false
      }
      if(!params.studentno){
        this.$message({
          type: 'warning',
          message: '学号不能为空！'
        })
        return false
      }
      if(!params.entranceyear){
        this.$message({
          type: 'warning',
          message: '入学年份不能为空！'
        })
        return false
      }
      var loginInit = that.$loading()
      if (params.studentid) {
        editstudent(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '修改成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      } else {
        addstudent(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '新增成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm('确定要删除此条记录吗？删除后不可恢复！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {}
        var that = this
        params.schoolid = item.schoolid
        params.studentid = item.studentid
        delstudent(params).then(res => {
          if (res.data.code == 0) {
            that.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          that.onsearch()
        }).catch(error => [
          that.$message({
            type: 'warning',
            message: '删除失败'
          })
        ])
      })
    },
    onsearch() {
      this.page.currentPage = 1
      this.onSubmit()
    },
    onSubmit() {
      var params = {}
      var that = this
      params.pageindex = that.page.currentPage // 当前页数
      params.pagesize = that.page.pageSize // 每页展示条数
      params.schoolname = that.searchKey.schoolname
      params.gradename = that.searchKey.gradename
      params.classname = that.searchKey.classname
      params.studentname = that.searchKey.studentname
      params.deviceid = that.searchKey.deviceid
      params.phone = that.searchKey.phone
      params.studenttype = Number(that.searchKey.studenttype)
      that.page.tableLoading = true
      getstudentlist(params)
        .then((res) => {
          that.page.tableLoading = false
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist
            that.page.totalRow = res.data.data.totalcount
          }else{
            that.$message({
              type: 'error',
              message: res.data.msg
            })
          }
          // that.searchData = res.data.data.datalist
          // that.page.totalRow = res.data.data.totalcount
          // that.page.totalPage = res.data.page.totalPageNum
          // that.page.pageSize = parseInt(res.data.page.pageNum)
        })
        .catch(() => {
          that.page.tableLoading = false
          
        })
    }

  }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}
.el-table .el-button {
    display: inline-block;
    margin: 0 10px;
}
</style>
